<script setup lang="ts">

import { onMounted, ref } from 'vue'
import { Check, Delete, Search } from '@element-plus/icons-vue'
import { ElMessage } from 'element-plus';
import { requestAxios } from '../../axios';

interface IQo {
  name: string
  pageIndex: number
  pageSize: number
  DateBegin: string
  DateEnd: string
}
interface Imsg {
  index: number
  contact: string
  createDate: number
  msgID: number
  isRead:boolean
  name: string
  text: string
}
const loading = ref<boolean>(false)
const total = ref<number>(0)
const qo = ref<IQo>({
  name: '',
  pageIndex: 1,
  pageSize: 20,
  DateBegin: '',
  DateEnd: ''
})
const Time = ref<[Date, Date] | null>(null)
const list = ref<Imsg[]>([])
const name = ref('')

const onSearch = () => {
  qo.value.pageIndex = 1
  if (Time.value) {
    qo.value.DateBegin = Time.value[0].toLocaleString().replace(/\//g, '-')
    qo.value.DateEnd = Time.value[1].toLocaleString().replace(/\//g, '-')
  } else {
    qo.value.DateBegin = ''
    qo.value.DateEnd = ''
  }
  qo.value.name = name.value
  getList(qo.value)
}
const getList = (Qc: IQo) => {
  list.value = []
  loading.value = true
  requestAxios
    .post('/leavemessage/query', Qc)
    .then((res: any) => {
      list.value = res.data.results
      total.value = res.data.total
      loading.value = false
    })
    .catch((err) => {
      loading.value = false
      console.log(err)
    })
}
const onPageChange = (pageIndex: number, pageSize: number) => {
  console.log(pageIndex, pageSize)
  qo.value.pageIndex = pageIndex
  getList(qo.value)
}
const onDelete=(id:string)=>{
   requestAxios.get('/leavemessage/delete/'+id).then(res=>{
   if(res.code===0){
    ElMessage.success(res.msg)
    getList(qo.value)
   }else{
    ElMessage.error(res.msg)
   }
   }).catch(err=>{
    console.log(err)
})
}
const onRead=(id:string)=>{
   requestAxios.get('/leavemessage/read/'+id).then(res=>{
   if(res.code===0){
    ElMessage.success(res.msg)
    getList(qo.value)
   }else{
    ElMessage.error(res.msg)
   }
   }).catch(err=>{
    console.log(err)
})
}
// const getTableData = (list: Imsg[]) => {
//   return list.map((item, index) => {
//     item.index = index + 1
//     return item
//   })
// }
onMounted(() => {
  getList(qo.value)
})
</script>

<template>
  <div class="container">
    <h3>留言管理</h3>
    <div class="search-container">
      <el-input
        v-model="name"
        clearable
        style="width: 200px; margin-right: 8px"
        placeholder="请输入留言人姓名"
      />
      <el-date-picker
        style="margin-right: 8px"
        v-model="Time"
        :default-value="null"
        :default-time="null"
        type="datetimerange"
        range-separator="至"
        start-placeholder="开始时间"
        end-placeholder="结束时间"
      />
      <el-button :icon="Search" @click="onSearch" circle />
    </div>

    <el-table v-loading="loading" border="true" :data="list" style="width: 100%; height: 480px">
        <!-- <el-table-column type="selection" :selectable="true" width="55" /> -->
      <el-table-column prop="index" label="序号" width="55">

        <template #default="row">
          {{ row.$index + 1 }}
        </template>
      </el-table-column>
      <el-table-column prop="name" label="姓名" width="180" />
      <el-table-column prop="contact" label="联系方式" width="180" />
      <el-table-column prop="createDate" label="留言时间" width="180" />
      <el-table-column prop="text" show-overflow-tooltip label="留言内容" />
      <el-table-column prop="isRead" label="是否已读" width="90">
        <template #default="scop">
            {{ scop.row.isRead ? '已读' : '未读' }}
        </template>
      </el-table-column>

      <el-table-column label="操作" width="180">
        <template #default="scop">
          <el-popconfirm
            title="确定删除吗？"
            confirm-button-text="是"
            cancel-button-text="否"
            @confirm="onDelete(scop.row.msgID)"
          >
            <template #reference>
              <el-button type="danger" :icon="Delete" size="small"></el-button>
            </template>
          </el-popconfirm>
          <el-tooltip placement="top" content="标记为已读">
              <el-button @click="onRead(scop.row.msgID)" v-if="!scop.row.isRead" type="primary"  :icon="Check" size="small"></el-button>
          </el-tooltip>
        </template>
      </el-table-column>
    </el-table>
    <div class="pagination-block">
      <el-pagination
        layout="prev, pager, next"
        :total="total"
        @change="onPageChange"
        :page-size="qo.pageSize"
      />
    </div>
  </div>
</template>
<style scoped>
.container {
  padding: 0 24px;
  /* width: 100vw; */
  /* height: 100vh; */
}

.search-container {
  margin: 20px 0;
}
.table-container {
  padding: 20px;
}
.pagination-block {
  margin-top: 10px;
  display: flex;
  justify-content: end;
}
</style>
